<template>
	<div class="orderDetails" :class="this.$store.getters.isIphoneX ? 'pad-top80' : 'pad-top'">
		<back-header title="订单详情"></back-header>
		<div class="orderDetails-warp">
			<choice-address @click.native="go([$router,'Sitelist'])" :address="address" :show="addressShow"></choice-address>
			<div class="caption">
				<div class="item flex" v-for="item in orderDetails" >
					<img :src="item.cover" width="50px;" heoght="50px;">
					<div class="info"><p class="name elip">{{item.title}}</p><p class="num telip">x{{item.num}}</p></div>
				</div>
			</div>
			<div class="distribution">
	        	<div class="distributionpay clearfix">配送方式 <img class="icon-right fr" src="../assets/images/rightrow.png"><span class="fr">包邮</span></div>
	        </div>
	        <p class="msg" style="text-align: center;font-size:14px;color:red;height:20px;">{{msg}}</p>
	        <button type="button" class="btn btn-yellow" id="button" @click="submit()" style="color:#666">确认订单</button>
		</div>
	</div>
</template>

<script type="text/javascript">
	import { mapMutations } from 'vuex'
	import backHeader from '../components/backHeader'
	import choiceAddress from '../components/choiceAddress'
	export default{
		name:'orderDetails',
		components:{backHeader,choiceAddress},
		data(){
			return {
				orderDetails:[],
				address:"",
				addressShow:true,
				back_ids:[],
				msg:"",
			}
		},
		mounted(){
			if(this.$store.state.address.address_id){
				this.address = this.$store.state.address;
				this.addressShow = false;
				
			}else{
				this.address = "点击添加收货地址";
				this.addressShow = true;
				
			}

			this.orderDetails = this.$store.state.backpack;
			for(let i=0;i<this.orderDetails.length;i++){
				this.back_ids.push(this.orderDetails[i]['backpack_id'])
			}

			let toy_ids=[];
			let toys = [];
			for(let i=0;i<this.orderDetails.length;i++){
				if(toy_ids.indexOf(this.orderDetails[i]['toy_id']) >= 0){
					for(let i=0;i<toys.length;i++){
							if(toys[i]["toy_id"]==this.orderDetails[i]['toy_id']){
								toys[i]["num"]=parseInt(toys[i]["num"])+1;
							}
						}
				}else{
					this.orderDetails[i]['num'] = 1;
					toys.push(this.orderDetails[i]);
					toy_ids.push(this.orderDetails[i]['toy_id']);
				}
			}
			this.orderDetails = toys;
		},
		methods:{
			...mapMutations([
				'go'
			]),
			submit(){
				if(this.address.address_id){
					this.$jsonp(`${this.URL_PREFIX}/OpenAPI/V1/User/orderPost`,{
						token:this.$store.state.userInfo.token,
						ress_id:this.address.address_id,
						toy_ids:this.back_ids,
					}).then((response) => {
			              console.log(response)
			              if(response.code == '0'){
			              	this.msg = "提交成功";
			              	setTimeout(() => {
			              		this.$router.go(-1);
			              	},1000)
			              }else{
			              	this.msg = response.msg;
			              }
			  		 })
				}else{
					this.msg = "请选择收货地址";
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.btn-yellow{
		background:#feda2c;
	}
	.btn {
	    width: 92%;
	    display: block;
	    border: none;
	    height: 45px;
	    outline: 0;
	    font-size: 14px;
	    margin: 15px auto;
	    border-radius: 6px;
	    color: #fff
	}
	.orderDetails-warp{
		width:100%;
		height:100%;
	}
	
	.caption {
	    width: 100%;
	    min-height: 150px;
	    max-height: calc(100% - 210px);
	    max-height: -webkit-calc(100% - 210px);
	    padding: 0 10px;
	    margin-top: 0;
	    overflow-y: auto;
	    border-top: 10px solid #f3f3f3;
	    border-bottom: 10px solid #f3f3f3;
	    border-radius: 0;
	    .item {
		    padding: 10px 0;
		    border-bottom: 1px solid #f2f2f2;
		    img {
			    width: 55px;
			    border-radius: 5px;
			    margin-right: 20px;
			}
			.info {
			    width:230px;
			}
			.name {
			    width: 100%;
			    color: #555;
			    font-size: 14px;
			    line-height: 20px;
			}
			.num{
			    width: 100%;
			    color: #9b9b9b;
			    font-size: 14px;
			    line-height: 20px;
			}
		}

	}
	.distribution {
	    padding: 0 10px;
	}
	.distribution .distributionpay {
	    line-height: 50px;
	    border-bottom: 1px solid #eee;
	    font-size: 16px;
	    color: #606060;
	}

	.distribution .distributionpay span {
	    display: block;
	    height: 50px;
	    line-height: 50px;
	    font-size: 16px;
	    color: #606060;
	}

	.distribution .distributionpay img {
	    width: 8px;
	    display: block;
	    margin-top: 18px;
	    margin-left: 10px;
	}
	

</style>